<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jayway JsonPath evaluator</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>

        <script type="text/javascript" src="js/jsonpath-0.8.0.js"></script>
    </head>
    <body role="document">
        <div class="container">
            <h3>Jayway JsonPath Evaluator</h3>
            <div style="margin-top: -12px; margin-bottom: 10px;">
                <span id="version" style="font-size: xx-small"></span>&nbsp;-&nbsp;<span id="timestamp" style="font-size: xx-small"></span>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <select id="selTemplates" name="template" class="form-control">
                            <option value="blank"></option>
                            <option value="goessner.json" selected>Goessner examle</option>
                            <option value="twitter.json">Twitter API</option>
                            <option value="webxml.json">Webapp</option>
                            <option value="20k.json">20k</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <textarea id="txtJson" name="json" rows="15" class="form-control" placeholder="Select a template above or enter JSON">
{
    "store": {
        "book": [
            {
                "category": "reference",
                "author": "Nigel Rees",
                "title": "Sayings of the Century",
                "price": 8.95
            },
            {
                "category": "fiction",
                "author": "Evelyn Waugh",
                "title": "Sword of Honour",
                "price": 12.99
            },
            {
                "category": "fiction",
                "author": "Herman Melville",
                "title": "Moby Dick",
                "isbn": "0-553-21311-3",
                "price": 8.99
            },
            {
                "category": "fiction",
                "author": "J. R. R. Tolkien",
                "title": "The Lord of the Rings",
                "isbn": "0-395-19395-8",
                "price": 22.99
            }
        ],
        "bicycle": {
            "color": "red",
            "price": 19.95
        }
    },
    "expensive": 10
}
                        </textarea>
                    </div>

                    <div class="input-group">
                        <span id="path-status-tool" class="input-group-addon" data-toggle="tooltip" data-placement="top" title="Invalid path"><span id="path-status" class="fa fa-ban"></span></span>
                        <input id="txtPath" name="path" placeholder="Enter path" autocomplete="off" class="form-control"/>
                        <span class="input-group-btn">
                            <button id="submit" class="btn btn-primary" type="button">Go!</button>
                        </span>
                    </div>

                    <br/>

                    <div class="row">
                        <div class="col-md-6">
                        <fieldset>
                            <legend>JSONPath options</legend>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="rbType" value="VALUE" checked/>
                                    Matching values
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="rbType" value="PATH"/>
                                    Normalized path expressions
                                </label>
                            </div>
                        </fieldset>
                        </div>

                        <div class="col-md-6">
                        <fieldset>
                            <legend>Jayway options</legend>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="flagSuppress" id="cbFlagSuppress" />
                                    Suppress exceptions
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="flagWrap" id="cbFlagWrap" />
                                    Always return result list
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="flagNullLeaf" id="cbFlagNullLeaf" />
                                    Return null for missing leaf
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="flagRequireProps" id="cbFlagRequireProps" />
                                    Require all properties
                                </label>
                            </div>
                        </fieldset>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">

                    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                        <li class="active"><a href="#jayway-tab" data-toggle="tab">Jayway</a></li>
                        <li><a href="#boon-tab" data-toggle="tab">Gatling</a></li>
                        <li><a href="#nebhale-tab" data-toggle="tab">Nebhale</a></li>
                        <li><a href="#goessner-tab" data-toggle="tab">Goessner</a></li>
                    </ul>

                    <div id="my-tab-content" class="tab-content">

                        <div class="tab-pane active" id="jayway-tab">
                            <br/>
                            <a href="https://github.com/jayway/JsonPath" target="_blank" style="float: right">About implementation...</a>
                            <span id="jayway-time"></span>&nbsp;millis
                            <hr/>
                            <div class="row">
                                <div class="col-md-12">
                                    <pre id="jayway-res" class="prettyprint result" style="background-color: transparent; border: none;"></pre>
                                </div>
                            </div>
                            <p id="jayway-error" class="bg-danger"></p>
                        </div>

                        <div class="tab-pane" id="boon-tab">
                            <br/>
                            <a href="https://github.com/gatling/jsonpath" target="_blank" style="float: right">About implementation...</a>
                            <span id="boon-time"></span>&nbsp;millis
                            <hr/>
                            <div class="row">
                                <div class="col-md-12">
                                    <pre id="boon-res" class="prettyprint result" style="background-color: transparent; border: none;"></pre>
                                </div>
                            </div>
                            <p id="boon-error" class="bg-danger"></p>
                        </div>

                        <div class="tab-pane" id="nebhale-tab">
                            <br/>
                            <a href="https://github.com/nebhale/JsonPath" target="_blank" style="float: right">About implementation...</a>
                            <span id="nebhale-time"></span>&nbsp;millis
                            <hr/>
                            <div class="row">
                                <div class="col-md-12">
                                    <pre id="nebhale-res" class="prettyprint result" style="background-color: transparent; border: none;"></pre>
                                </div>
                            </div>
                            <p id="nebhale-error" class="bg-danger"></p>
                        </div>

                        <div class="tab-pane" id="goessner-tab">
                            <br/>
                            <a href="http://goessner.net/articles/JsonPath/" target="_blank" style="float: right">About implementation...</a>
                            <span id="goessner-time"></span>&nbsp;millis
                            <hr/>
                            <div class="row">
                                <div class="col-md-12">
                                    <pre id="goessner-res" class="prettyprint result" style="background-color: transparent; border: none;"></pre>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function getParameterByName( name ){
            var regexS = "[\\?&]"+name+"=([^&#]*)",
                    regex = new RegExp( regexS ),
                    results = regex.exec( window.location.href );
            if( results == null ){
                return null;
            } else{
                return decodeURIComponent(results[1].replace(/\+/g, " "));
            }
        }

        $( document ).ready(function() {
            $.get('/api/info', function(data) {
                $("#version").text(data.version);
                $("#timestamp").text(data.timestamp);
            });

            $('#path-status-tool').tooltip({
                container: 'body',
                delay: 0
            });

            $('#selTemplates').on('change',  function() {
                var val = this.value;
                $.ajax({
                    url: "/json/" + val,
                    success: function(data){
                        if(data){
                            data = toJsonString(data);
                        }
                        $("#txtJson").val(data);
                    }
                });
            });

            $('#txtPath').keyup(function(e) {
                clearTimeout($.data(this, 'timer'));
                if (e.keyCode === 13) {
                    $('#submit').click();
                    e.preventDefault();
                } else {
                    $(this).data('timer', setTimeout(checkPath, 500));
                }

            });

            function checkPath() {
                var pathString = $("#txtPath").val();

                var updateDisplay = function(icon, tooltip){
                    $('#path-status').removeClass().addClass('fa ' + icon);
                    $('#path-status-tool').attr('data-original-title', tooltip).tooltip('fixTitle');
                };

                if(pathString.length ==0){
                    updateDisplay('fa-ban', 'Invalid path');
                    return;
                }

                $.get('/api/validate/?path=' + pathString, function(data) {
                    if(data){
                        if(data.result === -1){
                            updateDisplay('fa-ban', 'Invalid path');
                        }
                        else if(data.result === 0){
                            updateDisplay('fa-bullseye', 'Path is definite');
                        }
                        else if(data.result === 1){
                            updateDisplay('fa-navicon', 'Path is indefinite');
                        }
                    }
                });
            }
            $('#submit').on('click', function() {
                $('.result').empty();
                var json = $('#txtJson').val();
                var path = $('#txtPath').val();
                var data = {
                    json: json,
                    path: path,
                    type: $('input[name=rbType]:checked').val(),
                    flagWrap: $('#cbFlagWrap').prop('checked'),
                    flagNullLeaf: $('#cbFlagNullLeaf').prop('checked'),
                    flagSuppress: $('#cbFlagSuppress').prop('checked'),
                    flagRequireProps: $('#cbFlagRequireProps').prop('checked')
                }
                $.ajax({
                    url: "/api/eval",
                    type: 'POST',
                    dataType: 'json',
                    data: data,
                    success: function(data) {

                        $('#jayway-time').text(data.jayway.time);
                        $('#jayway-res').hide().empty();
                        if(data.jayway.error){
                            $('#jayway-error').text(data.jayway.error).show();
                        } else {
                            $('#jayway-error').css( "display", "none")
                            $('#jayway-res').text(data.jayway.result).fadeIn();
                        }
                        $('#boon-time').text(data.boon.time);
                        $('#boon-res').hide().text(data.boon.result).fadeIn();
                        if(data.boon.error){
                            $('#boon-error').text(data.boon.error).show();
                        } else {
                            $('#boon-error').css( "display", "none")
                        }
                        $('#nebhale-time').text(data.nebhale.time);
                        $('#nebhale-res').hide().text(data.nebhale.result).fadeIn();
                        if(data.nebhale.error){
                            $('#nebhale-error').text(data.nebhale.error).show();
                        } else {
                            $('#nebhale-error').css( "display", "none")
                        }
                        var start = new Date().getTime();
                        var res;
                        try {
                            res = jsonPath(JSON.parse(json), path, {resultType: $('input[name=rbType]:checked').val() });
                            res = toJsonString(res);
                        } catch(err){
                            res = err.message;
                        }
                        var elapsed = new Date().getTime() - start;

                        $("#goessner-time").text(elapsed);
                        $("#goessner-res").hide().text(res).fadeIn();

                        $('.prettyprinted').removeClass('prettyprinted');

                        prettyPrint();
                    }
                });
            });

            var path =  getParameterByName('path');
            if(path !== null){
                $("#txtPath").val(path);
                $("#submit").click();
            }

        });

        var toJsonString = function(src){
            var str = JSON.stringify(src, null, '   ');
            if(str){
                str = str.replace(/": /g, '" : ');
                str = str.replace(/": \[/g, '" : [');
                str = str.replace(/": {/g, '" : {');
            }
            return str;
        };


    </script>

</html>